<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		#tutorial {
			border: 1px solid black;
			margin-left: 400;
		}
	</style>
	<body>
		<div id="color"></div>
		<canvas id="canvas" width="400" height="300"></canvas>
		<script type="text/javascript">
			var img = new Image();
			img.src = './img/111.png';
			var canvas = document.getElementById('canvas');
			var ctx = canvas.getContext('2d');
			img.onload = function() {
			  ctx.drawImage(img, 0, 0);
			  let imgdata = ctx.getImageData(0,0,canvas.clientWidth,canvas.clientHeight);
			  let data = imgdata.data;
			  
			  /* for (var i = 0; i < data.length; i+=4) {
			  	data[i] = 255-data[i];
				data[i+1] = 255-data[i+1];
				data[i+2] = 255-data[i+2];
			  }
			  ctx.putImageData(imgdata,0,0); */
			  
			  for (var i = 0; i < data.length; i+=4) {
				  let avg = (data[i] + data[i+1] + data[i + 2])/3
			  	data[i] = avg;
				data[i+1] = avg;
				data[i+2] = avg;
			  }
			  ctx.putImageData(imgdata,0,0)
			};
		</script>
	</body>
</html>
